<!--
 * @Author: your name
 * @Date: 2019-10-25 22:29:53
 * @LastEditTime: 2019-10-26 18:52:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \simple\src\components\imgCard\index.vue
 -->
<template>
  <div class="imgCard">
           <el-card :style="styleObject" shadow="hover" :body-style="{ padding: '0px' }">
              <div class="demo-image__preview">
                <el-image
                  :src="src"
                  :preview-src-list="[src]" :style="styleImg">
                </el-image>
              </div>
              <div style="padding: 12px">
                <span>身份证正面照</span>
                <hr>
              </div>
           </el-card>
  </div>
</template>

<script>
export default {
  // props: ['src'],
  props: {
    src: {
      type: String
    },
    width: {
      type: String
    },
    height: {
      type: String
    }
  },
  data () {
    return {
    }
  },
  computed: {
    styleObject: function () {
      return {
        width: this.width + 'px',
        height: this.height + 'px'
      }
    },
    styleImg: function () {
      return {
        width: '100%',
        height: Number(this.height) * 0.75 + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .el-card{
    width: 320px;
    height: 320px;
    span{
      // font-style: italic;
      font-size: 14px;
    }
    hr{
      color:#ccc;
    }
    // .el-image{
    //   width: 100%;
    //   height: 280px;
    // }
  }

</style>
